<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				padding: 0;
				/* background-color: rgb(30, 5, 141); */
			}
		</style>
	</head>
	<body>
	</body>
	<script src="./js/three.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="./js/OrbitControls.js" type="text/javascript" charset="utf-8"></script>
	<script src="./js/GLTFLoader.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// 主要元素：场景，相机，渲染
		var scene, camera, renderer;
		// 控制元素：旋转，轨道
		var orbitControls, clock;

		(function() {
			init();
			// AddBox();
			// AddBall();
			// AddCylinder();
			AddGround('./models/f1.glb', 0, -0.3, 0);
			for (var ii = 0; ii < 10; ii++)
				for (var i = 0; i < 30; i++) {
					AddModels('./models/gd2.glb', 0.5 + ii * 14, 0, 1 + i * 4, 3, 0.4, getRandomNumber(0, 35));
				}
			// AddBall();
			render();
		})()

		// 初始化元素：场景，相机，渲染，控制器，光源
		function init() {
			scene = new THREE.Scene();
			camera = new THREE.PerspectiveCamera(10, window.innerWidth / window.innerHeight, 0.1, 10000);
			camera.position.set(100, 30, 0);
			// camera.lookAt({x:100,y:0,z:30})
			// camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 0.1, 10000 );
			// scene.add( camera );

			renderer = new THREE.WebGLRenderer({
				antialias: true,
				alpha: true
			});
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);
			orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
			orbitControls.target = new THREE.Vector3(6.5, 0, -5.5);
			clock = new THREE.Clock();
			SetLight();
		}
		// 设置光源：点光源，环境光源
		function SetLight() {
			var point = new THREE.PointLight(0xfffddb, 0.8);
			point.position.set(120, 70, -60);
			scene.add(point);
			var ambient = new THREE.AmbientLight(0xffffff, 0.6);
			scene.add(ambient);

			////背景
			scene.background = new THREE.Color(0xa0a0a0);
			scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000);

			//网格
			const grid = new THREE.GridHelper(2000, 100, 0x000000, 0x000000);
			grid.material.opacity = 0.2;
			grid.material.transparent = true;
			scene.add(grid);
		}
		// 添加控制器并渲染
		function render() {
			var delta = clock.getDelta();
			orbitControls.update(delta);
			requestAnimationFrame(render);
			renderer.render(scene, camera);
		}

		// ******************************添加几何体**********************************

		// 添加立方体
		function AddBox() {
			var geometry = new THREE.BoxGeometry(100, 100, 100); //长，宽，高
			var material = new THREE.MeshLambertMaterial({
				color: 0x0000ff,
				wireframe: false
			});
			var mesh = new THREE.Mesh(geometry, material);
			scene.add(mesh);
		}
		// 添加球体
		function AddBall() {
			var geometry = new THREE.SphereGeometry(16, 40, 40); //半径，球面圆度
			var material = new THREE.MeshLambertMaterial({
				color: 0xff00ff,
				wireframe: false
			});
			var mesh = new THREE.Mesh(geometry, material);
			mesh.position.set(66, 0, 0);
			scene.add(mesh);
		}
		// 添加圆柱体
		function AddCylinder() {
			var geometry = new THREE.CylinderGeometry(10, 10, 30, 5); //上半径，下半径，高度，侧面分段数
			var material = new THREE.MeshLambertMaterial({
				color: 0xff00ff,
				wireframe: false
			});
			var mesh = new THREE.Mesh(geometry, material);
			mesh.position.set(-0, 0, 0);
			scene.add(mesh);
		}
		// 添加glb模型文件
		function AddGround(path, x, y, z) {
			var loader = new THREE.GLTFLoader();
			loader.load(path, function(gltf) {
				gltf.scene.position.set(x, y, z);
				gltf.scene.material = new THREE.MeshLambertMaterial({
					color: 0xff00ff,
					wireframe: false
				});
				scene.add(gltf.scene);
			}, undefined, function(error) {
				console.error(error);

			});
		}
		/*
		path 模型路径
		x,z,y 起点坐标
		width 宽度
		f 直径
		num 数量
		*/
		function AddModels(path, x, z, y, width, f, num) {
			y = -y;
			var ami = 0;
			while (ami < num) {
				var amj = 0;
				while (amj < parseInt(width / f) && ami < num) {
					AddGd2(path, x, z, y - amj * f);
					amj++;
					ami++;
				}
				z += f;

			}
		}

		function AddGd2(path, x, z, y) {
			var loader = new THREE.GLTFLoader();
			loader.load(path, function(gltf) {
				gltf.scene.position.set(x, z, y);
				scene.add(gltf.scene);
			}, undefined, function(error) {
				console.error(error);
			});
		}


		//获取随机数
		function getRandomNumber(min, max) {
			let x = Math.floor(Math.random() * (max - min + 1)) + min;
			return x;
		}
	</script>
</html>
